<template>
	<el-main>
		<!-- 查询条件 -->
		<el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
			<el-form-item>
				<el-input placeholder="请输入用户名" v-model="searchModel.username">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-input placeholder="请输入真实用户名" v-model="searchModel.realName">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-input placeholder="请输入电话号码" v-model="searchModel.phone">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="search()">查询
				</el-button>
				<el-button icon="el-icon-refresh-right" @click="resetValue()">重置</el-button>
				<el-button type="success" icon="el-icon-plus" @click="openAddWindow()">新增</el-button>
			</el-form-item>
		</el-form>
		<!-- 数据表格 -->
		<el-table :data="tableData" border stripe style="width: 100%; margin-bottom: 20px" >
			<el-table-column prop="username" label="用户名"></el-table-column>
			<el-table-column prop="realName" label="姓名"></el-table-column>
			<el-table-column prop="departmentName" label="所属部门"></el-table-column>
			<el-table-column prop="phone" label="电话"></el-table-column>
			<el-table-column prop="email" label="邮箱"></el-table-column>
			<el-table-column label="操作" width="300" align="center">
				<template slot-scope="scope">
					<el-button icon="el-icon-edit-outline" type="primary" size="small" @click="handleEdit(scope.row)">编辑
					</el-button>
					<el-button icon="el-icon-close" type="danger" size="small" @click="handleDelete(scope.row)">删除
					</el-button>
					<el-button icon="el-icon-setting" type="primary" size="small" @click="assignRole(scope.row)">分配角色
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			background
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="pageNo" :page-sizes="[5, 5, 5, 5, 5]"
			:page-size="5"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
			></el-pagination>

			<!-- 弹出框 -->
		<system-dialog 
			:title="infoDialog.title"
			:visible="infoDialog.visible"
			:width="infoDialog.width"
			:height="infoDialog.height"
			@onClose="onClose"
			@onConfirm="onConfirm"
			>
			<div slot="content">
				<el-form :model="info" ref="dialogForm" :rules="rules"
					label-width="80px" :inline="true" size="small">
					<el-form-item label="用户名称" prop="userName">
						<el-input v-model="info.userName"></el-input>
					</el-form-item>

					<!-- 用户头像 -->
					<el-form-item label="头像">
						<el-upload
							:show-file-list="false"
							:on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload"
							class="avatar-uploader"
							:data="uploadHeader"
							action="http://localhost:9999/api/oss/file/upload?module=avatar"
						>
						<img v-if="info.avatar" :src="info.avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"/>
						</el-upload>
					</el-form-item>
				</el-form>
			</div>
		</system-dialog>
		
		
	</el-main>
</template>
<script>
//导入api脚本
import UserApi from "@/api/user";
//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue';
//导入token
import {getToken} from '@/utils/auth'

export default {
    name: "department",
	components:{
		SystemDialog
	},
    data() {
        return {
            searchModel: {//查询条件
                username: "", 
				realName:"",
				phone:"",
				departmentId:"",
				pageNo:1, 
				pageSize:5,
            },
            tableData: [], //表格数据列表
			tableHeight: 0, //表格高度
			pageNo: 1, //当前页码
			pageSize: 5, //每页显示数量
			total: 0, //总数量
			departmentId: "", //部门编号
			//弹出框相关属性
			infoDialog: {
				title: "",
				visible: false, //是否显示
				width: 560,
				height: 230,
			},
			//上传需要携带的数据
			uploadHeader:{"token":getToken()},
			//弹出框-表单-对象
			info: {
				id: "",
				userName: "",
				avatar:""
			},
			//表单验证规则
			rules: {
				userName: [{ required: true, trigger: "blur", message: "请输入用户名称" }],
			},
		}
    },
    methods: {
        async search() {//列表
			this.searchModel.pageNo = this.pageNo;//当前页码
			this.searchModel.pageSize = this.pageSize;//每页显示数量
            //发送查询请求
            let res = await UserApi.getUserList(this.searchModel);
            //判断是否存在数据
            if (res.success) {
                //获取数据
                this.tableData = res.data.records;
				this.total = res.data.total;
            }
        },
        resetValue() { //重置
            this.searchModel = {}; //清空数据
            this.search(); //重新调用方法
        },
		 async handleDelete(row){
			//提示框
			let confirm =this.$myconfirm("确定要删除该数据吗?");
			if(confirm){
				
			}
		},
		/**
		* 当每页数量发生变化时触发该事件
		*/
		handleSizeChange(size) {
			this.pageSize = size; //将每页显示的数量交给成员变量
			this.search(this.pageNo, size);
		},
		/**
		* 当页码发生变化时触发该事件
		*/
		handleCurrentChange(page) {
			this.pageNo = page;
			//调用查询方法
			this.search(page, this.pageSize);
		},
		onClose() { //弹出框=》关闭窗口
			this.infoDialog.visible = false;
		},
		openAddWindow() { //添加
			//清空表单数据
			this.$resetForm("dialogForm", this.info);
			//设置窗口标题
			this.infoDialog.title = "新增用户";
			//显示添加部门窗口
			this.infoDialog.visible = true;
		},
		/**
		* 上传成功回调
		* @param res
		* @param file
		*/
		handleAvatarSuccess(res, file) {
			this.info.avatar = res.data //显示上传照片
			// 强制重新渲染
			this.$forceUpdate()
		},
		/**
		* 上传校验
		* @param file
		* @returns {boolean}
		*/
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg'
			const isLt2M = file.size / 1024 / 1024 < 2
			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!')
			} 
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!')
			} 
			return isJPG && isLt2M
		}
    },
    //初始化时执行
    created() {
        //调用查询部门列表方法
        this.search();
    }
};

</script>
<style lang="scss" >
//用户头像
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9 !important;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
} 
.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
} 
.avatar-uploader .avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
} 
.avatar-uploader img {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
